<template>
<view style="width: 95%; margin: 0px auto;">
		<div class="top">
			    <u-avatar text="北" fontSize="18" randomBgColor></u-avatar>
				<p>用户id12313123</p>
				<u-search placeholder="日照香炉生紫烟" v-model="keyword" bgColor="#eaeaea" :showAction="false" ></u-search>
				<u-icon name="share-square" size="30px"></u-icon>
		</div>
			<template>
				<u-swiper :list="Banner" indicator indicatorMode="line" circular keyName="image" height="200px">
					
				</u-swiper>
			</template>
			<view>
			      <u-notice-bar :text="text1" bgColor="#ffffff"></u-notice-bar>
			    </view>
			<div class="icon" >
					<div v-for="item in icon">
					<a :href="item.topath"><image :src=" baseurl + item.icno" style="width: 50px; height: 50px;"></image></a>
					<p>{{ item.description }}</p>
			
				</div>
			</div>
			<div class="goods" >
				<div class="goodes_top">
					 <u-tabs :list="goods_top" @click="click"></u-tabs>
					  <u-toast ref="uToast"></u-toast>
				</div>
				<div v-for="item in showGoodsList" class="goods_div" @click="toDetail(item)">
				<h3 style="width: 95%; margin: 2px auto ;">{{item.gname}}</h3>
				<view class="f3">
								<view v-if="item.gimg" class="f3">
									<img :src="baseurl + item1" v-for="item1 in item.gimg.split(',')">
								</view>
			                    <view v-else class="f3">
									<img src="@/static/c1.png">
									<img src="@/static/c2.png">
									<img src="@/static/c3.png">
								</view>
			                </view>
			
				<p class="desciption">{{item.description}}</p>
				
				<div class="date" >
					<div></div>
					<div class="kc"> 
						<p>已售<span style="color: red;">{{item.stock}}\</span>仅剩<span>{{item.lowstock}}</span></p>
						
						
					</div>
					
				</div>
				
				
				
				<div class="button_sub">
					<div class="price">
					<p style="color: red; font-weight: 400;">￥<span style="font-size: 38px; font-weight: 800;">{{item.saleprice}}</span>起</p>
					<p style="color: gray; ">￥<span style="text-decoration: line-through;">{{item.price}}</span></p>
						
					</div>
					<div class="but_jr"><u-button type="primary" text="加入购物车" shape="circle" color="rgb(10, 104, 21)"></u-button></div>
				
				</div>
				</div>
				<u-loadmore :status="status" />
				
				
			</div>
			
		
	</view>
</template>

<script>
import icon from '../../uni_modules/uview-ui/libs/config/props/icon';
import { API_BASE_URL } from '../../utils/appConfig';
import { getBanners } from '../API/banner/banner';
import { getGoods } from '../API/goods/goods';
import { listIcon } from '../API/Icon/icon';
import {mapState,mapActions} from 'vuex'
	export default {
		data() {
			return {
				keyword: '遥看瀑布挂前川',
				Banner: [],
				icon:[],
				baseurl:API_BASE_URL,
				goods_top:[],
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				goods:[],
				query:{
					publishstate:1,
					icid:null
				},
				showGoodsList:[],
				start:0,
				end:3,
				status:'loadmore',
				
			}
		},
			
		computed:{
		...mapState(['total'])
		},
		onReachBottom() {
					if (this.showGoodsList.length >= this.goods.length){
						this.status = "nomore";
						return
					}
					this.status ='loading'
					setTimeout(() => {
						this.start +=3;
						this.end +=3
						this.showGoodsList = this.showGoodsList.concat(this.goods.slice(this.start,this.end))
					}, 2000)
				},
		created(){
			this.getlist();
			this.getgoodsList();
		},
		onLoad(){
			this.getIconlist();
			this.getgoodsList();
			uni.setTabBarBadge({
				index:2,
				text:String(this.$store.state.total)
			})
		},
		methods: {
			...mapActions(['changeCartTotal']),
			getlist(){ //获取前端的轮播图
				getBanners().then(res =>{
				 res.data.rows.forEach(item =>{
						this.Banner.push(API_BASE_URL + item.bannerimg)
				 })
				})
				},
			getIconlist(){
					listIcon().then(res =>{
						this.icon = res.data.rows
						this.goods_top.push({name:"全部",id:null})
						res.data.rows.forEach(item =>{
							this.goods_top.push({
								name:item.description,
								id:item.icid
							})
						})
						
					})
				},
			getgoodsList(){
				getGoods(this.query).then(res =>{
					this.goods = res.data;
					this.showGoodsList=[]
					this.showGoodsList = this.goods.slice(this.start,this.end)
				})
			},
				 click(item) {
						console.log(item)
						this.query.icid = item.id;
						this.goods = []
						this.getgoodsList()
						this.$refs.uToast.success(`点击了第${item.id}`)
						console.log(this.goods)
				},
				toDetail(item){
					console.log(item.gid)
					uni.$u.route('pages/detail/detail',{id:item.gid})
				},
						
				
			
		}
	}
</script>

<style>
	.date{
		display: flex;
		width: 95%;
		margin: 1px auto;
	}
	.kc{
		
		margin-left: auto;
	}
	
	
	
	
		.button_sub{
			display: flex;
			width: 95%;
			margin: 1px auto;
		}
		.price{
			display: flex;
		}
			
		.price>p:nth-child(2){
	
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.but_jr{
			margin-left: auto;
			
		}
		.but_jr>.u-button{
			width: 120px;
			color: green;
		}
		.top{
		

			display: flex;
			margin-bottom: 5px;
			font-size: 24px;
		}
			
		.top>p{
			display: flex;
			align-items: center;
			justify-content: center;
		}
			
		.icon{
			margin-top: 10px;
		}
			
		
		.icon>div{
			display: inline-block;
			margin-left: 15px;
			text-align: center;
	
		
			
		}
			
		.goods_div{
			margin-top: 5px;
			-moz-box-shadow:-1px 2px 13px #B5B5B5; -webkit-box-shadow:-1px 2px 13px #B5B5B5; box-shadow:-1px 2px 13px #B5B5B5;
		}
		
		.desciption{
			width: 95%;/* 限制容器宽度 */
			display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
			-webkit-box-orient: vertical; /* 垂直排列 */
			-webkit-line-clamp: 3; /* 限制显示三行 */
			overflow: hidden; /* 隐藏超出范围的内容 */
			text-overflow: ellipsis; /* 使用省略号 */
			margin: 2px auto;
			font-size: 12px;
			color: #909090;
		}
		
	
		
		 .f3 img{
						width: 33%;
			            //width: 125rpx;
			            height: 120rpx;
			            padding: 3px;
			        }
			        .f3{
			            width: 100%;
			            height: 125rpx;
			            display: flex;
			            margin: 2px;
			            padding: 1px;
			        }
		
		
		
</style>
